<template>
  <div>
    <Card>
      <Button type="primary" @click="add(0)" style="margin-bottom: 20px"
        >添加一级分类</Button
      > <Button type="primary" @click="delAll" style="margin-bottom: 20px"
        >删除选中分类</Button
      >
      <div>
        <div class="tree">
          <Tree :data="cateList" show-checkbox :load-data="loadData" ref="trees"></Tree>
        </div>
      </div>
    </Card>
    <Modal
      v-model="showAdd"
      :title="title"
      @on-ok="handleSubmit('formValidate')"
      @on-cancel="showAdd = false"
    >
      <div>
        <Form
          ref="formValidate"
          :model="formValidate"
          :rules="ruleValidate"
          :label-width="100"
        >
          <FormItem label="分类名称" prop="title">
            <Input
              v-model="formValidate.title"
              placeholder="请输入分类名称"
            ></Input>
          </FormItem>
          <FormItem label="分类编号" prop="code">
            <Input
              v-model="formValidate.code"
              placeholder="请输入分类编号"
            ></Input>
          </FormItem>
          <FormItem label="分类排序" prop="sortOrder">
            <Input
              v-model="formValidate.sortOrder"
              placeholder="请输入分类排序"
            ></Input>
          </FormItem>
          <FormItem label="分类状态" prop="status">
            <RadioGroup v-model="formValidate.status">
              <Radio :label="0">启用</Radio>
              <Radio :label="-1">禁用</Radio>
            </RadioGroup>
          </FormItem>
           <FormItem label="是否为军人" prop="type">
            <RadioGroup v-model="formValidate.type">
              <Radio :label="1">否</Radio>
              <Radio :label="2">是</Radio>
            </RadioGroup>
          </FormItem>
        </Form>
      </div>
    </Modal>
  </div>
</template>

<script>
import {
  scProductTypegetByParentId,
  scProductTypeAdd,
  scProductTypedelByIds,
  scProductTypeedit
} from "@/api/index";
export default {
  name: "goodsCate",
  data() {
    return {
      title: "",
      companyId: localStorage.getItem("companyId"),
      showAdd: false,
      isParent: false,
      currentParent: {},
      cateList: [],
      formValidate: {
        type:1
      },
      ruleValidate: {
        title: [
          {
            required: true,
            message: "请输入分类名称",
            trigger: "blur",
          },
        ],
        code: [
          {
            required: true,
            message: "请输入分类编码",
            trigger: "blur",
          },
        ],
        sortOrder: [
          {
            required: true,
            message: "请输入排序",
            trigger: "change"
          },
        ],
        status: [
          {
            required: true,
            message: "请选择分类的状态",
            trigger: "change",
             type:'number'
          },
        ],
      },
      cateList: [],
      showData: [],
    };
  },
  mounted() {
    this.getlist(0);
  },
  methods: {
      delAll(){
        let list =  this.$refs.trees.getCheckedNodes().map(item=>{return item.id});
        
        if(list.length==0){
            this.$Message.error("请选中要删除的分类")
            return;
        }
         this.$Modal.confirm({
        title: "提示",
        content: "<p>确定要删除已选中的分类吗？</p>",
        onOk: () => {
          scProductTypedelByIds({ ids: list.join(',') }).then((res) => {
            if (res.code == 200) {
              this.$Modal.remove();
              this.getlist(0)
            }
          });
        },
        onCancel: () => {},
      });
      },
    loadData(item, callback) {
      scProductTypegetByParentId({
        companyId: this.companyId,
        parentId: item.id,
      }).then((res) => {
        console.log("懒加载");
        if (res.code == 200) {
          let data = res.result.map((item) => {
            if (item.isParent) {
              item.children = [];
              item.loading = false;
            }
            item.render = (h, { root, node, data }) => {
              return h(
                "span",
                {
                  style: {
                    display: "inline-block",
                    width: "100%",
                  },
                },
                [
                  h("span", [h("span", data.title)]),
                  h(
                    "span",
                    {
                      style: {
                        display: "inline-block",
                        float: "right",
                        marginRight: "32px",
                      },
                    },
                    [
                      h("Button", {
                        props: Object.assign({}, this.buttonProps, {
                          icon: "ios-add",
                          type: "primary",
                          size: "small",
                        }),
                        style: {
                          marginLeft: "15px",
                        },
                        on: {
                          click: () => {
                            this.add(1, data);
                          },
                        },
                      }),
                      h("Button", {
                        props: Object.assign({}, this.buttonProps, {
                          icon: "md-create",
                          type: "primary",
                          size: "small",
                        }),
                        style: {
                          marginLeft: "15px",
                        },
                        on: {
                          click: () => {
                            this.edit(data);
                          },
                        },
                      }),
                      h("Button", {
                        props: Object.assign({}, this.buttonProps, {
                          icon: "ios-trash-outline",
                          type: "primary",
                          size: "small",
                        }),
                        style: {
                          marginLeft: "15px",
                          float: "right",
                        },
                        on: {
                          click: () => {
                            this.dele(data);
                          },
                        },
                      }),
                    ]
                  ),
                ]
              );
            };
            return item;
          });
          console.log("data:", data);
          callback(data);
        }
      });
    },
    getlist(parentId) {
      scProductTypegetByParentId({
        companyId: this.companyId,
        parentId: parentId,
      }).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.cateList = res.result.map((item) => {
            if (item.isParent) {
              item.children = [];
              item.loading = false;
            }
            item.render = (h, { root, node, data }) => {
              return h(
                "span",
                {
                  style: {
                    display: "inline-block",
                    width: "100%",
                  },
                },
                [
                  h("span", [h("span", data.title)]),
                  h(
                    "span",
                    {
                      style: {
                        display: "inline-block",
                        float: "right",
                        marginRight: "32px",
                      },
                    },
                    [
                      h("Button", {
                        props: Object.assign({}, this.buttonProps, {
                          icon: "ios-add",
                          type: "primary",
                          size: "small",
                        }),
                        style: {
                          marginLeft: "15px",
                        },
                        on: {
                          click: () => {
                            this.add(1, data);
                          },
                        },
                      }),
                      h("Button", {
                        props: Object.assign({}, this.buttonProps, {
                          icon: "md-create",
                          type: "primary",
                          size: "small",
                        }),
                        style: {
                          marginLeft: "15px",
                        },
                        on: {
                          click: () => {
                            this.edit(data);
                          },
                        },
                      }),
                      h("Button", {
                        props: Object.assign({}, this.buttonProps, {
                          icon: "ios-trash-outline",
                          type: "primary",
                          size: "small",
                        }),
                        style: {
                          marginLeft: "15px",
                        },
                        on: {
                          click: () => {
                            this.dele(data);
                          },
                        },
                      }),
                    ]
                  ),
                ]
              );
            };
            return item;
          });
        }
      });
    },
    edit(item) {
      this.formValidate = {...item,sortOrder:String(item.sortOrder)};
      this.showAdd = true;
      this.title = "更新" + item.title;
    },
    dele(item) {
      this.$Modal.confirm({
        title: "提示",
        content: "<p>确定要删除该分类吗？</p>",
        onOk: () => {
          scProductTypedelByIds({ ids: item.id }).then((res) => {
            if (res.code == 200) {
              this.$Modal.remove();
              this.getlist(0)
            }
          });
        },
        onCancel: () => {},
      });
    },
    add(type, item) {
      console.log(item);
      this.title = "新增分类";
      this.currentParent = item;
      this.formValidate = {
        status: 0,
        type:1
      };
      this.showAdd = true;
      if (type == 0) {
        this.isParent = true;
        this.formValidate.isParent = 0;
        this.formValidate.parentId = 0;
      } else if (type == 1) {
        this.isParent = false;
        this.formValidate.isParent = 0;
        this.formValidate.parentId = item.id;
      }
    },
    handleSubmit(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          if (this.formValidate.id) {
              let data = {...this.formValidate}
              delete data.children;
              delete data.render;
              delete data.loading;
            scProductTypeedit(data).then((res) => {
              if (res.code == 200) {
                this.getlist(0);
              }
            });
          } else {
            scProductTypeAdd({
              ...this.formValidate,
              companyId: this.companyId,
            }).then((res) => {
              if (res.code == 200) {
                this.getlist(0);
              }
            });
          }
        } else {
          this.$Message.error("Fail!");
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.tree {
  max-width: 800px;
  /deep/.ivu-tree-title {
    width: 100%;
    padding-bottom: 5px;
    border-bottom: 1px solid #f3f3f3;
  }
}
</style>